template
<template>
  <div class="child-components-box">
    <!-- 添加组件 -->
    <div class="add-component">
      <el-popover
        popper-class="popover"
        placement="left"
        v-model="visible">
        <div class="popover-box">
          <div class="component-item" v-for="(item, index) in componentList" :key="index" @click="addComponnet(item, index)">
            <img src="https://www.icode9.com/i/l/?n=20&i=blog/1770007/202004/1770007-20200429160427449-2010964408.jpg"/>
            <div class="component-name">{{item.name}}</div>
          </div>
        </div>
        <i class="el-icon-plus" slot="reference"></i>
      </el-popover>
      <span class="title">子组件管理</span>
    </div>
    <!-- 已选组件  -->
    <div class="switch-component" v-for="(item, index) in selectComponents" :key="index">
      <el-switch
        v-model="item.show"
        active-color="#13ce66"
        :active-text="item.name"
        >
      </el-switch>
      <div class="component-operation">
        <el-button class="delete-operation" type="text" @click="deleteComponents(item, index)">删除</el-button>
        <i class="el-icon-s-operation" @click="openComponnetDialog(item)"></i>
      </div>
    </div>
    <!--  -->
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  name: 'ChildComponents',
  components: {

  },
  data() {
    return {
      visible: false,
      value: true,
      componentList: [
        {
          name: '气泡层',
          src:'',
          component: 'BubbleConfig'
        },
        {
          name: '热力层',
          src:'',
          component: 'HotAreaConfig'
        },
        {
          name: '高德在线地图',
          src:'',
          component: 'GaodeInlineConfig'
        },
        {
          name: '呼气气泡层',
          src:'',
          component: 'BreathBubbleConfig'
        },
        {
          name: '飞线图',
          src:'',
          component: 'FlylineConfig'
        }
      ]
    };
  },
  computed: {
    ...mapState({
      // projectData: state => state.editor.projectData,
      // activePageUUID: state => state.editor.activePageUUID,
      // activeElementUUID: state => state.editor.activeElementUUID
    }),
    ...mapGetters([
      // 'currentPageIndex',
      // 'activeElementIndex',
      'activeElement'
    ]),
    selectComponents() {
      return this.activeElement && this.activeElement.propsValue.mapConfig.childComponents || []
    }
  },
  created() {

  },
  mounted() {
  },
  methods: {
    openComponnetDialog(item) {
      this.$emit('showChildComponent', item)
    },
    addComponnet(item, index) {
      const { component } = item
      if(this.selectComponents.find(slectitem => slectitem.component === component)) {
        this.$message.warning('该子组件已存在');
        return
      }
      this.activeElement.propsValue.mapConfig.childComponents.push({...item, show: true})
    },
    deleteComponents(item, index) {
      this.activeElement.propsValue.mapConfig.childComponents.splice(index, 1)
    }
  }
};
</script>
<style lang="scss">
.popover {
  .popover-box {
    width: 300px;
    max-height: 300px;
    display: flex;
    flex-wrap: wrap;
    .component-item {
      width: 33%;
      text-align: center;
      height: 120px;
      cursor: pointer;
      img {
        display: inline-block;
        width: 80px;
        height: 80px;
        background: red;
      }
      .component-name {
        text-align: center;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.child-components-box {
  padding-top: 10px;
  border-top: 2px solid #ccc;
  .add-component {
    .el-icon-plus {
      font-size: 16px;
      color: #25A589;
      cursor: pointer;
    }
    .title {
      font-size: 14px;
      font-weight: bold;
      padding-left: 5px;
    }
  }
  .switch-component {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .component-operation {
      cursor: pointer;
      .delete-operation {
        color: red;
        margin-right: 15px;
      }
      .el-icon-s-operation {
        font-size: 16px;
      }
    }
  }
}
</style>

